<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航 -->
    <nav class="bg-white shadow-sm border-b">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <div class="w-8 h-8 rounded-xl shadow flex items-center justify-center bg-gradient-to-br from-purple-500 to-blue-500">
              <span class="text-white text-base font-bold">馒</span>
            </div>
            <span class="ml-2 text-xl font-semibold text-gray-900">馒头AI助手</span>
          </div>
          
          <!-- 用户信息 -->
          <div class="relative" ref="userMenuRef">
            <button
              @click="showUserMenu = !showUserMenu"
              class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 transition-colors"
            >
              <div class="w-8 h-8 user-avatar rounded-full flex items-center justify-center">
                <span class="text-white text-sm font-medium">{{ userInitial }}</span>
              </div>
              <span class="text-sm text-gray-700">{{ authStore.username }}</span>
            </button>
            
            <!-- 用户菜单 -->
            <div
              v-show="showUserMenu"
              class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 z-50"
            >
              <div class="py-1">
                <button
                  @click="handleLogout"
                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
                >
                  注销登录
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主内容区域 -->
    <main class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">
          欢迎使用馒头AI助手
        </h1>
        <p class="text-xl text-gray-600">
          选择一个AI应用开始您的智能对话之旅
        </p>
      </div>

      <!-- 应用卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
        <!-- AI恋爱大师 -->
        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
          <div class="p-8">
            <div class="flex items-center mb-6">
              <div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-600 rounded-xl flex items-center justify-center">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </div>
              <h3 class="ml-4 text-2xl font-bold text-gray-900">AI恋爱大师</h3>
            </div>
            <p class="text-gray-600 mb-6 leading-relaxed">
              专业的恋爱咨询和情感指导助手，帮助您在感情路上更加顺利。提供个性化的约会建议、沟通技巧和情感分析。
            </p>
            <div class="flex flex-wrap gap-2 mb-6">
              <span class="px-3 py-1 bg-pink-100 text-pink-700 rounded-full text-sm">恋爱咨询</span>
              <span class="px-3 py-1 bg-rose-100 text-rose-700 rounded-full text-sm">情感分析</span>
              <span class="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">约会建议</span>
            </div>
            <router-link
              to="/love-chat"
              class="w-full inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gradient-to-r from-pink-500 to-rose-600 hover:from-pink-600 hover:to-rose-700 transition-all duration-200"
            >
              开始对话
            </router-link>
          </div>
        </div>

        <!-- AI超级智能体 -->
        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-hidden">
          <div class="p-8">
            <div class="flex items-center mb-6">
              <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center">
                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
              </div>
              <h3 class="ml-4 text-2xl font-bold text-gray-900">AI超级智能体</h3>
            </div>
            <p class="text-gray-600 mb-6 leading-relaxed">
              多功能AI助手，具备强大的推理能力和工具调用功能。可以帮您处理各种复杂任务，从文本创作到数据分析。
            </p>
            <div class="flex flex-wrap gap-2 mb-6">
              <span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">文本创作</span>
              <span class="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm">数据分析</span>
              <span class="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-sm">多工具调用</span>
            </div>
            <router-link
              to="/manus-chat"
              class="w-full inline-flex justify-center items-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 transition-all duration-200"
            >
              开始对话
            </router-link>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import RandomLogo from '../components/RandomLogo.vue'

const router = useRouter()
const authStore = useAuthStore()

const showUserMenu = ref(false)
const userMenuRef = ref(null)

// 用户名首字母
const userInitial = computed(() => {
  return authStore.username ? authStore.username.charAt(0).toUpperCase() : 'U'
})

// 注销处理
const handleLogout = () => {
  authStore.logout()
  router.push('/login')
  showUserMenu.value = false
}

// 点击外部关闭用户菜单
const handleClickOutside = (event) => {
  if (userMenuRef.value && !userMenuRef.value.contains(event.target)) {
    showUserMenu.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script> 